<template>
	<div class="TradeDetail">
		<v-header></v-header>
		<div class="item-box">
			<div class="top">
				<div class="left">
					<h3>流水号：{{fatherItem.sellCode}}</h3>
				</div>
				<div class="right">
					<h3 v-if="isBuyOrSell == 'buy'">状态：<font color="#00CC66">{{getStatusValToBuyF(fatherItem.matchingStatus)}}</font></h3>
					<h3 v-else>状态：<font color="#00CC66">{{getStatusValToSellF(fatherItem.matchingStatus)}}</font></h3>
				</div>
			</div>	
			<div class="content">
				<div class="left">
					<p>用户名：<font color="#00CC66">{{fatherItem.userName}}</font></p>
					<p>姓名：<font color="#00CC66">{{fatherItem.realName}}</font></p>
					<p>手机号：<font color="#00CC66">{{fatherItem.phone}}</font></p>
				</div>
				<div class="right">
					<p>匹配数量：<font color="#00CC66">{{fatherItem.kbcNum}}</font></p>
					<p>单价：<font color="#00CC66">{{fatherItem.kbcPrice}}</font></p>
					<p>金额：<font color="#00CC66">{{total(fatherItem.kbcNum,fatherItem.kbcPrice)}}</font></p>
				</div>
			</div>
			<div class="bottom">
				<div class="left">
					<h3>发布时间：{{fatherItem.createTime}}</h3>
				</div>
			</div>	
		</div>
		<div v-if="isBuyOrSell == 'buy'" style="font-weight: 700;padding: 10px 20px;text-align:center;color:red;border: 1px solid #CECECE;">点击确定打款查看卖家收款银行帐号、微信号、支付宝进行核对！<br/>温馨提示：打款前请与卖家确认相关收款信息</div>
		<div v-else style="font-weight: 700;padding: 10px 20px;text-align:center;color:red;border: 1px solid #CECECE;">点击确定打款查看买家收款银行帐号、微信号、支付宝进行核对！<br/>温馨提示：打款前请与买家确认相关收款信息</div>
		<div class="" style="font-size: 1.3rem;text-align: center;padding: 10px 0;font-weight: 700;background-color: #f5e6d6;border: 1px solid #DEDEDE;">
			详细信息
		</div>
		<div class="">
			<ul class="table-min-box">
				<li v-if="isShow">
					<div class="no-data">
						暂无数据！
					</div>
				</li>
				<li v-if="items!=''" v-for="item in items">
					<div class="item-box" v-if="isBuyOrSell == 'buy'" style="background-color: #f5e6d6;">
						<div class="top">
							<div class="left">
								<h3>订单号：{{item.sellCode}}</h3>
							</div>
							<div class="right">
								<h3>状态：<font color="#2BAF4A">{{getStatusValToBuy(item.matchingStatus)}}</font></h3>
							</div>
						</div>
						<div class="content">
							<div class="left">
								<p>用户名：<font color="#2BAF4A">{{item.userName}}</font></p>
								<p>姓名：<font color="#2BAF4A">{{item.realName}}</font></p>
								<p>手机号：<font color="#2BAF4A">{{item.phone}}</font></p>
							</div>
							<div class="right">
								<p>匹配数量：<font color="#2BAF4A">{{item.kbcNum}}</font></p>
								<p>单价：<font color="#2BAF4A">{{item.kbcPrice}}</font></p>
								<p>金额：<font color="#2BAF4A">{{total(item.kbcNum,item.kbcPrice)}}</font></p>
							</div>
						</div>
						<div class="bottom">
							<div class="left">
								<h3>发布时间：{{item.createTime}}</h3>
							</div>
							<div class="right" v-if="item.matchingStatus==2">
								<h3><mt-button type="default" size="normal" @click.native="buyAction(item.memberId,item.remittanceVoucher,item.id,false)">查看</mt-button></h3>
							</div>
							<div class="right" v-else>
								<h3><mt-button type="danger" size="normal" @click.native="buyAction(item.memberId,item.remittanceVoucher,item.id,true)">确认打款</mt-button></h3>
							</div>
						</div>	
					</div>
					<div class="item-box" v-else style="background-color: #f5e6d6;">
						<div class="top">
							<div class="left">
								<h3>订单号：{{item.buyCode}}</h3>
							</div>
							<div class="right">
								<h3>状态：{{getStatusValToSell(item.matchingStatus)}}</h3>
							</div>
						</div>
						<div class="content">
							<div class="left">
								<p>用户名：{{item.userName}}</p>
								<p>姓名：{{item.realName}}</p>
								<p>手机号：{{item.phone}}</p>
							</div>
							<div class="right">
								<p>匹配数量：{{item.kbcNum}}</p>
								<p>单价：{{item.kbcPrice}}</p>
								<p>金额：{{total(item.kbcNum,item.kbcPrice)}}</p>
							</div>
						</div>
						<div class="bottom">
							<div class="left">
								<h3>发布时间：{{item.createTime}}</h3>
							</div>
							<div class="right" v-if="item.matchingStatus==3">
								<h3><mt-button type="default" size="normal" @click.native="sellAction(item.memberId,'')">查看</mt-button></h3>
							</div>
							<div class="right" v-else-if="item.matchingStatus==1">
								<h3>&nbsp;</h3>
							</div>
							<div class="right" v-else>
								<h3><mt-button type="danger" size="normal" @click.native="sellAction(item.memberId,item.id)">确定收款</mt-button></h3>
							</div>
						</div>	
						<!--<div class="bottom">
							<div class="left">
								<p><mt-button type="default" size="normal" @click.native="popupVisible2 = true">查看详细</mt-button></p>
							</div>
							<div class="right">
								<h3><mt-button type="danger" size="normal" @click.native="popupVisible1 = true">确认打款</mt-button></h3>
							</div>
						</div>
						<div class="bottom">
							<div class="left">
								<p><mt-button type="default" size="normal" @click.native="popupVisible1 = true">查看详细</mt-button></p>
							</div>
							<div class="right">
								<h3><mt-button type="danger" size="normal">查看打款</mt-button></h3>
							</div>
						</div>-->
					</div>
				</li>
			</ul>
		</div>
		<!--买方交易确认详细-->
		<mt-popup v-model="popupVisible1" popup-transition="popup-fade" class="mint-popup-1" closeOnClickModal="false">
			<div class="mint-popup-title" style="border-bottom: 1px solid #CECECE;height: 40px;text-align: center;line-height: 40px;">
				收款人信息
			</div>
			<div class="mint-popup-main">
				<div class="mint-popup-content">
				    <p>卖家帐号：{{memberInfo.userName}}</p>
				    <p>卖家联系方式：{{memberInfo.phone}}</p>
				    <p>支付宝帐号：{{memberInfo.zhifubao}}</p>
				    <p>微信帐号：{{memberInfo.wxUser}}</p>
				    <p>收款银行：{{memberInfo.openBank}}</p>
				    <p>收款帐号:{{memberInfo.bankAccount}}</p>
				    <p>收款支行：{{memberInfo.bankBranch}}</p>
				</div>
				<!--<p style="font-weight: 700;">打款凭证上传</p>-->
				<div class="mint-popup-img">
					<!--<img src="../../../kbc/h5/img/css/index/160926181522464.jpg" />-->
					<img v-if='remittance1' v-bind:src="remittance1" :onerror="upload" class="pic">
					<!--<img src="../../../kbc/h5/img/css/index/upload.jpg" class="pic"/>-->
		       	  	<img :src="isImage" v-if="isImage" class="pic">
				    <input type="file" class="form-choose" accept="image/jpeg,image/jpg,image/png" multiple=true @change="onFileChange">
				</div>
				<div class="mint-popup-pwd">
					 <mt-field label="交易密码" placeholder="请输入交易密码" type="password" v-model="tradePwd"></mt-field>
				</div>
				<div class="mint-popup-btn">
					<div class="cancel">
						<mt-button type="default" size="normal" @click.native="popupVisible1 = false">取 消</mt-button>
					</div>
					<div class="sure">
						<mt-button type="danger" size="normal" @click.native="popBuySure(tradeId)">确认</mt-button>
					</div>
				</div>
				
			</div>
	    </mt-popup>
	    <!--卖方交易确认详细-->
	    <mt-popup v-model="popupVisible2" popup-transition="popup-fade" class="mint-popup-1" closeOnClickModal="false">
			<div class="mint-popup-title" style="border-bottom: 1px solid #CECECE;height: 40px;text-align: center;line-height: 40px;">
				收款人信息
			</div>
			<div class="mint-popup-main">
				<div class="mint-popup-content">
				    <p>卖家帐号：{{memberInfo.userName}}</p>
				    <p>卖家联系方式：{{memberInfo.phone}}</p>
				    <p>支付宝帐号：{{memberInfo.zhifubao}}</p>
				    <p>微信帐号：{{memberInfo.wxUser}}</p>
				    <p>收款银行：{{memberInfo.openBank}}</p>
				    <p>收款帐号:{{memberInfo.bankAccount}}</p>
				    <p>收款支行：{{memberInfo.bankBranch}}</p>
				</div>
				<div class="mint-popup-pwd">
					 <mt-field label="交易密码" placeholder="请输入交易密码" type="password" v-model="tradePwd"></mt-field>
				</div>
				<!--<p style="font-weight: 700;">打款凭证上传</p>-->
				<!--<div class="mint-popup-img">
					<img src="../../../kbc/h5/img/css/index/upload.jpg" class="pic"/>
		       	  	<img :src="isImage" v-if="isImage" class="pic">
				    <input type="file" class="form-choose" accept="image/jpeg,image/jpg,image/png" multiple=true @change="onFileChange">
				</div>-->
				<div class="mint-popup-btn">
					<div class="cancel">
						<mt-button type="default" size="normal" @click.native="popupVisible2 = false">取 消</mt-button>
					</div>
					<div class="sure">
						<mt-button type="danger" size="normal" @click.native="popSellSure(tradeId)">确认</mt-button>
					</div>
				</div>
			</div>
	    </mt-popup>
	</div>
</template>
<script>
import router from './../../router';
	import util from './../../js/util/util.js';
	import vHeader from './../common/Header.vue';
	import imageView from 'vue-imageview'
	import uploadAxios from 'axios'
	import { Navbar, TabItem, Toast, MessageBox,Loadmore,Indicator } from 'mint-ui';
	let interval;
	export default {
		data() {
			return {
				isImage:false,
				upload: 'this.src="' + require('../../../kbc/h5/img/css/index/upload.jpg') + '"',
				// 图片数组
		        imgArr: ['/kbc/img/test/160926181522464.jpg'],
		        // 显示组件
		        show: false,
		        // 从哪一张图片开始
		        imageIndex: 0,
		        popupVisible1: false,//显示买家信息
		        popupVisible2: false,//显示卖家信息
				fatherItem:[],
				items:[],
				memberInfo:{},
				isBuyOrSell:'',
				isShow: false,
				isShowTradePwd: false,
				tradeId:'',
				tradePwd:'',
				ischeakRe1:false, //是否已经提交
				remittance1:'',
				remittanceVoucher:'',
				isNeedUpload:false
				

			};
		},
		components: { // 声明子组件
			Navbar,
			TabItem,
			MessageBox,
			Toast,
			Indicator,
			imageView,
			Loadmore,
			vHeader
		},
		methods: {
			total: function(a,b){ //卖出输入时计算
				var res;
				if(!util.isEmpty(a)&&!util.isEmpty(b)){
					res = (Number(a)*Number(b)).toFixed(2);
				}
				return res;
			},
			//查看图片==start
			showImgView () {
		        this.show = true
		    },
		    hideImageView () {
		        this.show = false
		    },
		    selectImg (index) {
		        this.show = true
		        this.imageIndex = index
		    },
		    onFileChange(e) { //头像处理 在提交的方法里，通过 this.isImage 即可
				var files = e.target.files || e.dataTransfer.files;
				if (!files.length)return;
				this.createImage(files[0]);
				//上传图片
//				this.uploadImg(files[0]);
			  },
			createImage(file) {
			  var isImage = new Image();
			  var reader = new FileReader();
			  var vm = this;
			  reader.onload = (e) => {
			    vm.isImage = e.target.result;
			  };
			   reader.readAsDataURL(file);
			},
		      //查看图片==end
		    sellAction: function(id,tradeId) { //收款确认/查看
				let $this = this;
				$this.popupVisible2 = true;
				util.Ajax('/userCentered/getMemeberByIdForTrade?memberId='+id, "GET",{}, function(data) { //成功
					if(data) {
						if(data.code == "0") {
							$this.memberInfo = data.member;
						} else {
							Toast(data.msg);
						}
					}
				});
				if (!util.isEmpty(tradeId)) { //不为空，确认打款，显示交易密码
					$this.isShowTradePwd = true;
					$this.tradeId = tradeId;
				} else{
					$this.isShowTradePwd = false;
				}
			},
			popSellSure:function(id){//确认（卖方交易确认）
				let $this = this;
				let tradePwd = $this.tradePwd;
				if(!tradePwd || tradePwd.length == 0) {
					MessageBox.alert("交易密码不能为空！", "提示");
					return false;
				}
				MessageBox.confirm("是否确定收款？").then(action => {
					util.Ajax('/kbc/trade/toTradeSellSure', "GET",{
						"id": id,
						"checkTradePass": tradePwd
					}, function(data) { //成功
						if(data) {
							if(data.code == "0") {
								//$this.memberInfo = data.member;
//								Toast("确定成功！");
								MessageBox.alert("确定成功！", "提示");
							} else {
								MessageBox.alert(data.msg, "提示");
//								Toast(data.msg);
							}
							$this.popupVisible2 = false;
							window.location.reload();//刷新页面
						}
					})
				});
			},
			buyAction: function(id,remittance1,tran_id,ischeakRe1) { //子item确认打款
				let $this = this;
				this.ischeakRe1 = ischeakRe1;
				this.tradeId = tran_id;
				this.checkUpload();
				console.log("图片地址2："+localStorage.getItem("imgUrl"));
				this.remittance1 = localStorage.getItem("imgUrl")+"static/upload/toUpload/"+remittance1;
				util.Ajax('/userCentered/getMemeberByIdForTrade?memberId='+id, "GET",{}, function(data) { //成功
					if(data) {
						if(data.code == "0") {
							$this.popupVisible1 = true;
							$this.memberInfo = data.member;
						} else {
							Toast(data.msg);
						}
					}
				})
				if (!util.isEmpty($this.tradeId)) { //不为空，确认打款，显示交易密码
					$this.isShowTradePwd = true;
				} else{
					$this.isShowTradePwd = false;
				}
			},
			//判断凭证是否需要上传
			checkUpload:function(){
				let $this = this;
				util.Ajax("/admin/sysDict/getDictionariesByKey?key=CHEAK-UPLOAD_A-001", "GET",{}, function(data) { //成功
					if(data) {
						if(data.code==0){
					    	if(data.dictionaries.enUs=='ON'){
					    		$this.isNeedUpload = true;
					    	}else{
					    		$this.isNeedUpload = false;
					    	}
					    }else{
					    	$this.isNeedUpload = true;
					    }
					}
				})
			},
			popBuySure:function(){//确认（买方交易确认）
				let $this = this;
				let tradePwd = $this.tradePwd;
				if(!$this.ischeakRe1){
					MessageBox.alert("已经完成交易，请勿重复提交", "提示");
					return;
				}
				if ($this.isNeedUpload) {
//					if (!this.isImage) {
					MessageBox.alert("请上传打款凭证！", "提示");
					return false;
//					}
				}
				
				if(!tradePwd || tradePwd.length == 0) {
					MessageBox.alert("交易密码不能为空！", "提示");
					return false;
				}
				//判断是否需要上传图片
				if (this.isImage) {
					let $this = this;
					console.log("图片地址1："+localStorage.getItem("imgUrl"));
					var base64img = this.isImage.split("data:image/jpeg;base64,")[1];
					Indicator.open({text: '正在上传图片...',spinnerType: 'fading-circle'}); //加载等待
					util.upload(localStorage.getItem("imgUrl")+'fileUpload/H5FileUpload',{"base64img":base64img}, function(data) { //成功
						if(data) {
							Indicator.close();
							if(data.code == 0){
								MessageBox.alert("图片上传成功！！", "提示");
								$this.remittanceVoucher = data.msg;
							}
						}else{
							Indicator.close();
							MessageBox.alert("图片上传失败！！", "提示");
						}
					});
				}
				MessageBox.confirm("是否确定打款？").then(action => {
//					var base64img = this.isImage.split("data:image/jpeg;base64,")[1];
//					util.upload("http://47.95.115.217:8089/fileUpload/H5FileUpload",{"base64img":base64img}, function(data) { 
//						console.log(data)
//						MessageBox.alert("确定成功！"+data.msg, "提示");
//					});
					util.Ajax('/kbc/trade/toTradeBuySure', "GET",{
						"id": $this.tradeId,
						"checkTradePass": tradePwd,
						"remittanceVoucher":$this.remittanceVoucher
					}, function(data) { //成功
						if(data) {
							if(data.code == "0") {
								MessageBox.alert("确定成功！", "提示");
							} else {
								MessageBox.alert(data.msg, "提示");
							}
							$this.popupVisible1 = false;
							window.location.reload();//刷新页面
						}
					});
				});
			},
			go: function(url,data){
				util.pushRouter(router, url, {"item":data,"type":1});
			},
			getChildList: function(item,flag) { //获取子列表
				let $this = this;
				let url = "";
				if (flag == "buy") {
					url = '/kbc/trade/queryDealSellerList?buyInfoId='+item.id;
				} else{
					url = '/kbc/trade/queryDealBuyerList?sellInfoId='+item.id;
				}
				util.Ajax(url, "GET",{}, function(data) { //成功
					if(data) {
						if(data.code == "0") {
							$this.items = data.items;
							if ($this.items.length > 0) {
								$this.isShow = false;
							} else{
								$this.isShow = true;
							}
						}else{
							$this.isShow = true;
							Toast(data.msg);
						}
					}
				})
			},
			getMemberInfoById: function(id) { //根据交易ID获取会员信息
				let $this = this;
				util.Ajax('/userCentered/getMemeberByIdForTrade', "GET",{
					"memberId": id
				}, function(data) { //成功
					if(data) {
						if(data.code == "0") {
							$this.memberInfo = data.member;
						} else {
							Toast(data.msg);
						}
					}
				})
			},
			getStatusValToBuy: function(code){ //我的成交状态，买方交易确认-详细-状态
				if(code=='1'){
					return "已匹配";
				}else if(code=='2'){
					return "已打款";
				}else if(code=='3'){
					return "已完成";
				}else{
					return code;
				}
			},
			getStatusValToSell: function(code){ //我的成交状态，卖方交易确认-详细-状态
				if(code=='1'){
					return "已匹配";
				}else if(code=='2'){
					return "已付款";
				}else if(code=='3'){
					return "已完成";
				}else if(code=='4'){
					return "已违约";
				}else{
					return code;
				}
			},
			getStatusValToBuyF: function(code){ //我的成交状态，买方交易确认-状态
				if(code=='1'){
					return "匹配中";
				}else if(code=='2'){
					return "已匹配";
				}else if(code=='3'){
					return "已打款";
				}else if(code=='4'){
					return "已完成";
				}else if(code=='5'){
					return "已撤销";
				}else{
					return code;
				}
			},
			getStatusValToSellF: function(code){ //我的成交状态，卖方交易确认-状态
				if(code=='1'){
					return "匹配中";
				}else if(code=='2'){
					return "已匹配";
				}else if(code=='3'){
					return "已打款";
				}else if(code=='4'){
					return "已完成";
				}else{
					return code;
				}
			}
		},
		created() {
			this.$store.state.headings = this.$router.history.current.name; //修改标题
			this.$store.state.isFooterShow = true; //显示底部导航
			this.$store.state.flag = 1;
		},
		mounted: function() {
			this.fatherItem = this.$route.query.item;
			if(!util.isEmpty(this.fatherItem.id)){
				localStorage.setItem("fatherItem",JSON.stringify(this.fatherItem));
			}else{
				this.fatherItem = JSON.parse(localStorage.getItem("fatherItem"));
			}
			this.isBuyOrSell = this.$route.query.flag;
			this.getChildList(this.fatherItem,this.isBuyOrSell);
			
			//获取服务器图片地址路径
			util.Ajax('/kbc/trade/initPage', "POST",{},function(data) { //成功
				if(data) {
					if(data.code == "0") {
						$this.$store.state.imgUrl = data.data;
						localStorage.setItem("imgUrl", data.data);
					} else {
						$this.$store.state.imgUrl = "";
						Toast("获取服务器地址出错！");
					}
				}
			})
			
//			let $this = this;
//			this.getInitData();
//			
//			util.Ajax('/userCentered/getMemeberById', "POST",{},function(data) { //成功
//				if(data) {
//					if(data.code == "0") {
//						$this.phoneNum = data.member.phone;
//					} else {
//						Toast(data.msg);
//					}
//				}
//			})
		}
	}
</script>


<style>
	.v-html{color: #F32043;}
	.TradeDetail{margin-top: 4rem;}
	.TradeDetail .mint-popup-1 {
		width: 85%;
		border-radius: 8px;
		min-height: 200px;
		z-index: 1000;
		/*transform: translate(-50%, 0);*/
	}
    .TradeDetail .mint-popup-1 .mint-popup-title{font-size: 1.3rem;}
    .TradeDetail .mint-popup-1 .mint-popup-main{padding: 10px;}
	.TradeDetail .mint-popup-1 .mint-popup-main .mint-popup-content{font-size: 1.2rem;padding: 0 10px;}
	.TradeDetail .mint-popup-1 .mint-popup-main .mint-popup-content p{margin: 5px auto;}
	.TradeDetail .mint-popup-1 .mint-popup-main .mint-popup-img{width: 100%;height:100px;margin-top:10px;box-sizing: border-box;}
	.TradeDetail .mint-popup-1 .mint-popup-main .mint-popup-img .pic{width:90%; height: 100px;border: 5px solid #CECECE;position: absolute; bottom:7.2rem; left: 1rem;}
	.TradeDetail .mint-popup-1 .mint-popup-main .mint-popup-img .form-choose{position: absolute; bottom:8.2rem; left: 0;width:100%;height:100px; opacity: 0;}
	.TradeDetail .mint-popup-1 .mint-popup-main .mint-popup-pwd{position: relative;width: 100%;}
	.TradeDetail .mint-popup-1 .mint-popup-main .mint-popup-btn{display: flex;text-align: center;}
	.TradeDetail .mint-popup-1 .mint-popup-main .mint-popup-btn .cancel{-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
	.TradeDetail .mint-popup-1 .mint-popup-main .mint-popup-btn .sure{-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
	.TradeDetail .item-box{border: 1px solid #E7E1CD;min-height: 25px;width: 100%;padding: 0 10px;box-sizing: border-box;
		-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius: 8px; 
background-color: #FFFFFF;}
.TradeDetail .item-box .top{
		border-bottom: 1px solid #CECECE;min-height: 30px;width: 100%;display: table;
	}
.TradeDetail .item-box .content{
		min-height: 45px;width: 100%;display: table;
	}
.TradeDetail .item-box .bottom{
		border-top: 1px solid #CECECE;min-height: 30px;width: 100%;display: table;
	}
	.TradeDetail .item-box .left {
		vertical-align:middle;   
  		display:table-cell;
		-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		text-align: left;
	}
	.TradeDetail .item-box .right {
		vertical-align:middle;   
  		display:table-cell;
		-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;
		text-align: right;
	}
	.TradeDetail .item-box p {
		margin: 5px auto;
	}
	.TradeDetail .mint-button--small {
		  display: inline-block;
		  font-size: 14px;
		  padding: 0 12px;
		  height: 20px;
		}
	.TradeDetail .mint-button--normal {
		font-size: 14px;
		 height: 30px;
	}
	.mint-indicator-wrapper{z-index: 99999;}
</style>